<template>
	<div class="new-modal">
		<div class="new-modal-title" style="font-size: 17px; position: absolute; width: 100%; z-index: 999;">
			<i class="ion-chevron-left return" @click="genderDelete()"></i> 筛选
			<i class="right-submit" @click="genderSubmit()">确定</i>
		</div>
		<div class="car-editor" style="padding-top: 44px;">
			<div class="reserve">
				<ul>
					<li>
						<list>
							<item>
								<div class="car-enitor-tr">
									<div class="car-editor-name">仅看特卖</div>
									<div class="car-editor-input"></div>
									<div class="car-editor-right">
										<div class="item item-borderless item-toggle von-toggle">
											<label class="toggle toggle-balanced">
									            <input type="checkbox" v-model="toRetailPrice">
									            <div class="track">
									            	<div class="handle"></div>
									            </div>
									        </label>
										</div>
									</div>
								</div>
							</item>
							<item v-if="params.carStockState <= 2">
								<div class="car-enitor-tr">
									<div class="car-editor-name">仅看驳回</div>
									<div class="car-editor-input"></div>
									<div class="car-editor-right">
										<div class="item item-borderless item-toggle von-toggle">
											<label class="toggle toggle-balanced">
									            <input type="checkbox" v-model="carStockState">
									            <div class="track">
									            	<div class="handle"></div>
									            </div>
									        </label>
										</div>
									</div>
								</div>
							</item>
							<item v-if="params.carOrderState!=1">
								<div class="car-enitor-tr">
									<div class="car-editor-name">仅看已预定</div>
									<div class="car-editor-input"></div>
									<div class="car-editor-right">
										<div class="item item-borderless item-toggle von-toggle">
											<label class="toggle toggle-balanced">
									            <input type="checkbox" v-model="carOrderState">
									            <div class="track">
									            	<div class="handle"></div>
									            </div>
									        </label>
										</div>
									</div>
								</div>
							</item>
							<item>
								<div class="car-enitor-tr">
									<div class="car-editor-name">已认证</div>
									<div class="car-editor-input"></div>
									<div class="car-editor-right">
										<div class="item item-borderless item-toggle von-toggle">
											<label class="toggle toggle-balanced">
									            <input type="checkbox" v-model="carAuthState">
									            <div class="track">
									            	<div class="handle"></div>
									            </div>
									        </label>
										</div>
									</div>
								</div>
							</item>
							
						</list>
					</li>
					<li>
						<div class="car-editor-title">
							检测状态
						</div>
						<list>
							<item>
								<div class="car-enitor-tr" @click="carDetectStateFn(0)">
									<div class="car-editor-name" >
										<input type="radio" value="0"  id="dcj" class="none" v-model.number="carDetectState" />
										<label >
											<div class="screen-state">
												<i class="ion-ios-circle-outline gray" v-if="carDetectState!==0" ></i>
												<i class="ion-ios-checkmark default" v-if="carDetectState===0" ></i>
											</div>
											待初检
										</label>										
									</div>
								</div>
							</item>
							<item>
								<div class="car-enitor-tr" @click="carDetectStateFn(10)">									
									<div class="car-editor-name">
										<input type="radio" value="10" id="ycj"  class="none" v-model="carDetectState" />
										<label >
											<div class="screen-state">
												<i class="ion-ios-circle-outline gray" v-if="carDetectState!=10" ></i>
												<i class="ion-ios-checkmark default" v-if="carDetectState==10" ></i>
											</div>
											已初检
										</label>										
									</div>
								</div>
							</item>
							<item>
								<div class="car-enitor-tr" @click="carDetectStateFn(20)">
									<div class="car-editor-name">
										<input type="radio" value="20" id="yrz" class="none" v-model="carDetectState"  />
										<label >
											<div class="screen-state">
												<i class="ion-ios-circle-outline gray" v-if="carDetectState!=20" ></i>
												<i class="ion-ios-checkmark default" v-if="carDetectState==20" ></i>
											</div>
											已认证
										</label>										
									</div>
								</div>
							</item>

						</list>
					</li>
					<li>
						<div class="car-editor-title">
							上架状态
						</div>
						<list>
							<item>
								<div class="car-enitor-tr" @click="carSaleStateFn(20)">
									<div class="car-editor-name">
										<input type="radio" value="20" id="ysj" class="none" v-model="carSaleState"  />
										<label >
											<div class="screen-state">
												<i class="ion-ios-circle-outline gray" v-if="carSaleState!=20" ></i>
												<i class="ion-ios-checkmark default" v-if="carSaleState==20" ></i>
											</div>
											已上架
										</label>										
									</div>
								</div>
							</item>
							<item>
								<div class="car-enitor-tr" @click="carSaleStateFn(0)">									
									<div class="car-editor-name">
										<input type="radio" value="0" id="wsj" class="none" v-model.number="carSaleState"  />
										<label >
											<div class="screen-state">
												<i class="ion-ios-circle-outline gray" v-if="carSaleState!==0" ></i>
												<i class="ion-ios-checkmark default" v-if="carSaleState===0" ></i>
											</div>
											未上架
										</label>										
									</div>
								</div>
							</item>
							<item>
								<div class="car-enitor-tr" @click="carSaleStateFn(10)">
									<div class="car-editor-name">
										<input type="radio" value="10" id="sjz" class="none" v-model="carSaleState"  />
										<label >
											<div class="screen-state">
												<i class="ion-ios-circle-outline gray" v-if="carSaleState!=10" ></i>
												<i class="ion-ios-checkmark default" v-if="carSaleState==10" ></i>
											</div>
											上架中
										</label>										
									</div>
								</div>
							</item>
							<item>
								<div class="car-enitor-tr" @click="carSaleStateFn(30)">
									<div class="car-editor-name">
										<input type="radio" value="30" id="yxj" class="none" v-model="carSaleState"  />
										<label >
											<div class="screen-state">
												<i class="ion-ios-circle-outline gray" v-if="carSaleState!=30" ></i>
												<i class="ion-ios-checkmark default" v-if="carSaleState==30" ></i>
											</div>
											已下架
										</label>										
									</div>
								</div>
							</item>

						</list>
					</li>
					<li v-if="params.carStockState==20">
						<div class="car-editor-title">
							抵押状态
						</div>
						<list>
							<item>
								<div class="car-enitor-tr" @click="carPledgeStateFn(310)">
									<div class="car-editor-name">
										<input type="radio" value="310" id="ysj" class="none" v-model="carPledgeState"  />
										<label >
											<div class="screen-state">
												<i class="ion-ios-circle-outline gray" v-if="carPledgeState!=310" ></i>
												<i class="ion-ios-checkmark default" v-if="carPledgeState==310" ></i>
											</div>
											已抵押
										</label>										
									</div>
								</div>
							</item>
							<item>
								<div class="car-enitor-tr" @click="carPledgeStateFn(300)">									
									<div class="car-editor-name">
										<input type="radio" value="300" id="wsj" class="none" v-model.number="carPledgeState"  />
										<label >
											<div class="screen-state">
												<i class="ion-ios-circle-outline gray" v-if="carPledgeState!==300" ></i>
												<i class="ion-ios-checkmark default" v-if="carPledgeState===300" ></i>
											</div>
											未抵押
										</label>										
									</div>
								</div>
							</item>
							
						</list>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				carOrderState: false,
				carDetectState:'',
				carSaleState:'',
				toRetailPrice:false,
				carPledgeState:'',
				carAuthState: false,
				carStockState: false,
			}
		},
		methods: {
			genderDelete() {
				this.$emit('cancel')
			},
			genderSubmit() {
				this.$emit('cancel',{
					carOrderState:this.carOrderState?1:'',
					carBargainPriceState:this.toRetailPrice?1:'',
					carDetectState:this.carDetectState,
					carSaleState:this.carSaleState,
					carPledgeState:this.carPledgeState||'',
					carAuthState: this.carAuthState?1:'',
					carStockState: this.carStockState?1: '',
				})
			},
			carDetectStateFn(val){
				
				if(val === this.carDetectState){
					this.carDetectState = ''
				}else{
					this.carDetectState = val
				}
			},
			carSaleStateFn(val){
				if(val === this.carSaleState){
					this.carSaleState = ''
				}else{
					this.carSaleState = val
				}
			},
			carPledgeStateFn(val){
				if(val === this.carPledgeState){
					this.carPledgeState = ''
				}else{
					this.carPledgeState = val
				}
			}
		},
		props: [
			'params'
		],
		activated(){
			console.log(this.params)
		}
	}
</script>
<style type="text/css" scoped="scoped"> 
	.screen-state{ display: inline-block; vertical-align: middle; font-size: 22px; margin-top: -4px;}
	.screen-state .default{ color: #FF6819;}
	.screen-state .gray{color: #565656;}
</style>